<template>
  <div class="contnet-box">
    <div class="data-box flex ac">
      <div class="data-box-left-box">
        <div class="top-btn-box flex ac jb">
          <el-button
            type="primary"
            plain
            @click="addRouterDialogVisible = true"
          >
            新增顶级
          </el-button>
          <el-switch
            :disabled="!data.length"
            v-model="openVal"
            @change="switchChange"
          />
        </div>
        <div class="tree-box">
          <el-tree
            :expand-on-click-node="false"
            ref="tree"
            highlight-current
            :data="data"
            :props="defaultProps"
          >
            <template #default="scope">
              <div class="custom-tree-node">
                {{ scope.data.label }}
              </div>
            </template>
            <template #empty>
              <el-empty style="margin-top: 50%" description="无数据" />
            </template>
          </el-tree>
        </div>
      </div>
      <div class="data-box-right-box">
        <div v-if="!data.length" class="node-data-box">
          <el-empty description="无数据" />
        </div>
        <p class="title" v-if="data.length">详情</p>
        <el-form
          :model="addForm"
          label-width="auto"
          label-position="left"
          v-if="data.length"
        >
          <el-form-item label="是否显示在导航栏：">
            <el-input class="input-box" v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="名称：">
            <el-input class="input-box" v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="接口路径：">
            <el-input class="input-box" v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="vue-path：">
            <el-input class="input-box" v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="vue-component：">
            <el-input class="input-box" v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="图标：">
            <el-input class="input-box" v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="排序：">
            <el-input class="input-box" v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="页面功能：">
            <span class="click-btn" @click="pageFuncDialogVisible = true">
              点击查看
            </span>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" class="search-btn1">确认修改</el-button>
            <el-button type="primary" plain class="search-btn2">
              新增子类
            </el-button>
            <el-button type="danger" plain class="search-btn3">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!-- 添加路由 -->
  <addrouterCom
    :show="addRouterDialogVisible"
    @onClose="addRouterDialogVisible = false"
  ></addrouterCom>
  <!-- 页面功能 -->
  <addFuncCom
    :show="pageFuncDialogVisible"
    @onClose="pageFuncDialogVisible = false"
  ></addFuncCom>
</template>
<script setup>
import { onMounted, reactive, toRefs, ref, getCurrentInstance } from 'vue'
import { ArrowRightBold, Plus } from '@element-plus/icons-vue'
import addrouterCom from '@/components/addrouterCom/index.vue'
import addFuncCom from '@/components/addFuncCom/index.vue'
const { proxy: that } = getCurrentInstance()
onMounted(() => {
  console.log('index')
})
// 页面功能
let pageFuncDialogVisible = ref(false)
// 添加路由弹窗
let addRouterDialogVisible = ref(false)
//
let openVal = ref(false)
let addForm = ref({
  show: 1,
})
const switchChange = () => {
  var nodes = that.$refs.tree.store.nodesMap
  for (var i in nodes) {
    nodes[i].expanded = openVal.value
  }
}
let data = [
  {
    label: '上海联屏文化有限公司',
    children: [
      {
        label: '福州子公司',
      },
    ],
  },
  {
    label: '上海联屏文化有限公司',
    children: [
      {
        label: '福州子公司',
      },
    ],
  },
]
const defaultProps = {
  children: 'children',
  label: 'label',
  class: function (tree, node) {
    return 'tree-top'
  },
}
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
<style lang="scss">
</style>